  
<template>
    <div class="edu-page-warp">
        <el-card shadow="never" body-style="padding: 24px;" class="card-margin clearfix">
            <div class="clearfix">
                <div class="float-left" style="margin-top:5px;margin-bottom: 20px;">
                    <h2>{{titleName}} - {{titleLevel}} - {{courseType?courseType+' - ':''}}{{startYear}}~{{endYear}}</h2>
                </div>
                <div class="float-left" style="margin-left:50px;">
                    <el-button type="text" @click="back">返回</el-button>
                </div>
            </div>
            <div class="div-main clearfix">
                <div class="float-left">
                    <el-input
                        v-model="queryForm.nameCN"
                        placeholder="输入课程代码或课程名称"
                        style="width:200px"
                        @keyup.enter.native="getCondition"
                        maxlength="50"
                    >
                        <i
                            class="el-icon-search"
                            slot="suffix"
                            style="margin-top:10px;cursor:pointer"
                            @click="getCondition"
                        ></i>
                    </el-input>
                </div>
                <div class="float-right">
                    <el-button type="primary" @click="addCourse">{{ $t('common.btn.add') }}</el-button>
                    <el-button @click="deleteCourse">{{ $t('common.btn.delete') }}</el-button>
                    <el-button  @click="exportCourse">{{ $t('common.btn.export') }}</el-button>
                </div>
             </div>
            <el-table
                ref="multipleTable"
                :data="courseList"
                cell-class-name="preline"
                size="mini"
                @selection-change="selectionChange"
                
            >
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column :label="'荣誉课程代码'" fixed="left" width="120">
                    <template slot-scope="props">{{ props.row.courseCode}}</template>
                </el-table-column>
                <el-table-column :label="'荣誉课程名称'" show-overflow-tooltip>
                    <template slot-scope="props">{{ props.row.courseName}}</template>
                </el-table-column>
                <el-table-column :label="'开课学院'" >
                    <template slot-scope="props">{{ props.row.collegeI18n}}</template>
                </el-table-column>
                <el-table-column :label="'学分'" width="120">
                    <template slot-scope="props">{{ props.row.creidits}}</template>
                </el-table-column>
                <el-table-column :label="'学时'" width="120">
                    <template slot-scope="props">{{ props.row.peroid}}</template>
                </el-table-column>
                <el-table-column :label="'替换课程'" >
                    <template slot-scope="props">{{ props.row.courseNameRep}}</template>
                </el-table-column>
                <el-table-column :label="'操作'" width="120">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="mini"
                            @click="edit(scope.row)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            size="mini"
                            @click="remove(scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row>
                <el-col>
                    <el-pagination
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20, 40, 80, 100]"
                        :page-size="queryForm.pageSize_"
                        :total="queryForm.total"
                        layout="total, sizes, prev, pager, next, jumper"
                        style="float:right;margin-top:10px"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </el-col>
            </el-row>
        </el-card>
        <el-dialog
            :title="title"
            :visible.sync="showCourseDialog"
            width="40%"
            @close="resetFormValidate()"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form
                ref="classifyForm"
                :model="classifyForm"
                label-width="150px"
                label-position="right"
                size="mini"
                class="bg-white"
            >
                <el-row :gutter="20">
                    <el-col :span="20" :offset="2">
                        <el-form-item label="荣誉课程代码:">
                            <el-select
                                v-model="addCourseForm.courseCode"
                                filterable
                                remote
                                placeholder="请输入"
                                :remote-method="queryCourse"
                                style="width: 100%;"
                                @change="checkCourse"
                                clearable
                            >
                                <el-option
                                    v-for="item in courses"
                                    :key="item.value"
                                    :label="item.value + '-' +item.label"
                                    :value="item.value"
                                ></el-option>
                                <i class="el-icon-search" slot="prefix"></i>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20" :offset="2">
                        <el-form-item :label="'荣誉课程名称：'" >
                            <el-input
                                v-model="addCourseForm.name"
                                type="text"
                                style="width:100%"
                                disabled
                                maxlength="50"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20" :offset="2">
                        <el-form-item :label="'开课学院：'" >
                            <el-input
                                v-model="addCourseForm.college"
                                type="text"
                                style="width:100%"
                                disabled
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20" :offset="2">
                        <el-form-item :label="'学分：'" >
                            <el-input
                                v-model="addCourseForm.credits"
                                type="text"
                                style="width:100%"
                                disabled
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20" :offset="2">
                        <el-form-item :label="'学时：'" >
                            <el-input
                                v-model="addCourseForm.period"
                                type="text"
                                style="width:100%"
                                disabled
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20" :offset="2">
                        <el-form-item label="替换课程:">
                            <el-select
                                v-model="courseCodeRep"
                                filterable
                                remote
                                placeholder="请输入"
                                :remote-method="queryNewCourse"
                                style="width: 100%;"
                                clearable
                                multiple
                            >
                                <el-option
                                    v-for="item in newCourses"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                                <i class="el-icon-search" slot="prefix"></i>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row>
                <el-col :span="24">
                    <div class="float-right">
                        <el-button
                            @click="cancelAddCourseLab"
                        >{{ $t('common.btn.cancel') }}</el-button>
                        <el-button
                            type="primary"
                            @click="addCourseLabs"
                        >{{ $t('common.btn.confirm') }}</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>
<script>
import {
    honorModuleCourselist,
    addHonorModuleCourse,
    getCourses,
    bclHonorModuleList,
    findCourseByid,
    getCourseList,
    addCourseToCommonLab,
    findCommonLabCourse,
    deleteCourseToCommonLab,
    updateHonorModuleCourse,
    updateCourseLab,
    deleteHonorModuleCourse,
    exportHonorModuleCourse
} from "common/src/api/culture/bachelor";
import { queryDic , findTrainingLevelByProjId} from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import bus from "common/src/utils/bus";
export default {
    data() {
        return {
            id:'',
            titleName: "",
            titleLevel: "",
            courseType: "",
            startYear: "",
            endYear: "",
            showCourseDialog: false,
            showAddCourseDialog: false,
            title:'添加课程',
            honorCourseId:'',
            multipleSelection: [],
            courseList: [],
            courses:[],
            newCourses:[],
            queryForm: {
                nameCN:"",
                pageNum_:1,
                pageSize_:20
            },
            options: {
                Courses: [],
                college: [],
                coutseTag:[]
            },
            // 添加分类
            classifyForm: {
                // nameCN: "",
                // nameEN: "",
                // courseType: ""
            },
            addCourseForm: {
                
            },
            courseCodeRep:[],
            classifyOptions: {
                courseType: []
            },
            courseList: [],
        };
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
        // labType(newVal, oldVal){
        //     if (newVal) {
        //         this.clear();
        //         this.init();
        //         this.getCourseType();
        //     }
        // },
        detailForm: {
            handler(newName, oldName) {
                if(oldName){
                    this.isEdit = true;
                    this.isEditCourseLab = true;
                }
                if (newName.id !== oldName.id) {
                    this.isEdit = false;
                }
            },
            deep: true
        }
    },
    created() {
        let courseMaintenance = JSON.parse(sessionStorage.getItem("courseMaintenance"));
        if(courseMaintenance&&courseMaintenance.nameCN){
            this.queryForm.id = courseMaintenance.id;
            this.titleName = courseMaintenance.nameCN;
            this.titleLevel = courseMaintenance.trainingLevelCN;
            this.courseType = courseMaintenance.courseType;
            this.startYear = courseMaintenance.startYear;
            this.endYear = courseMaintenance.endYear;
        }
        this.clear();
        this.getTreeData();
    },
    methods: {
        getTreeData() {
            this.courseList = [];
            this.queryForm.total = ""
            honorModuleCourselist(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.courseList = res.data.list;
                    this.queryForm.total = res.data.total_
                }
            });
        },
        getCondition(){
            this.courseList = [];
            this.getTreeData();
        },
        clear(){
            this.treeData=[];
            this.courseList=[];
            this.detailForm=[]
        },
        //返回
        back(){
            this.$router.push({
                path:'/bclCourseParameterSetting'
            })
        },
         // 处理分页大小
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.getTreeData();
        },
        // 处理分页改变
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.getTreeData();
        },
        addCourse(){
            this.title = "添加课程"
            this.showCourseDialog = true;
        },
        //查询课程
        queryCourse(val){
           // this.queryForm.nameCN=val;
            let data = {
                condition:val,
                pageSize_: 100,
                pageNum_: 1
            }
            getCourses(data).then(res => {
                if (res.code == 200) {
                    this.courses = res.data.list.map(item => {
                        return {
                            label:
                                "en" === this.$store.getters.language
                                    ? item.nameEn
                                    : item.name,
                            value: item.code,
                            college:item.college,
                            credits:item.credits,
                            period:item.period,
                        };
                    });
                }
            });
        },
        //查询替换课程
        queryNewCourse(val){
            let data = {
                condition:val,
                pageSize_: 100,
                pageNum_: 1
            }
            getCourses(data).then(res => {
                if (res.code == 200) {
                    this.newCourses = res.data.list.map(item => {
                        return {
                            label:
                                "en" === this.$store.getters.language
                                    ? item.nameEn
                                    : item.name,
                            value: item.code,
                            college:item.college,
                            credits:item.credits,
                            period:item.period,
                        };
                    });
                }
            });
        },
        checkCourse(code){
            console.log('code')
            this.addCourseForm = {}
            this.courses.forEach(d =>{
                if(code == d.value){
                    this.addCourseForm.courseCode = d.value;
                    this.addCourseForm.name = d.label;
                    this.addCourseForm.college = d.college;
                    this.addCourseForm.credits = d.credits;
                    this.addCourseForm.period = d.period;
                }
            })
        },
        selectionChange(selection) {
            const self = this;
            self.multipleSelection = selection;
        },
        //编辑
        edit(row){
             findCourseByid(row.honorCourseId).then(res => {
                if (res.code == 200) {
                    let newCoursesCode = []
                    let newCourses = res.data.map(item => {
                        return {
                            label: item.courseName,
                            value: item.courseCode,
                        };
                    });
                    if(res.data && res.data.length > 0){
                        res.data.forEach(d =>{
                            newCoursesCode.push(d.courseCode)
                        })
                    }
                    this.newCourses = newCourses;
                    this.addCourseForm.courseCode = row.courseCode;
                    this.addCourseForm.name = row.courseName;
                    this.addCourseForm.college = row.collegeI18n;
                    this.addCourseForm.credits = row.creidits;
                    this.addCourseForm.period = row.peroid;
                    this.honorCourseId = row.honorCourseId;
                    this.courseCodeRep = newCoursesCode
                    this.title = "编辑课程"
                    this.showCourseDialog = true;

                }
            });
        },
        //批量删除
        deleteCourse() {
            const ids = _.map(this.multipleSelection, "honorCourseId");
            if (ids.length === 0) {
                this.$notify.warning({
                    title: "提示",
                    message: "您还没有选择任何课程！"
                });
                return;
            }
            this.$confirm("确认删除所选列表课程,是否继续?", "提示", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                closeOnClickModal: false,
                closeOnPressEscape: false,
                type: "warning"
            })
                .then(() => {
                    deleteHonorModuleCourse(ids).then(res => {
                        if (res && res.code === 200) {
                            this.$notify.success({
                                title: "成功",
                                message: "删除成功！"
                            });
                        }
                        this.getTreeData();
                    });
                })
                .catch(err);
        },
        exportCourse(){
            const ids = _.map(this.multipleSelection, "honorCourseId").join(",");

           // if (ids.length === 0) {
              //  this.$notify.warning({
                //    title: "提示",
                   // message: "您还没有选择任何课程！"
              //  });
               // return;
          //  }
            console.log(ids);
            
            const params = {
                id:this.queryForm.id,
                pageSize:this.queryForm.pageSize_,
                pageNum:this.queryForm.pageNum_,
                ids: ids,
                nameCN:this.queryForm.nameCN
            };
            exportHonorModuleCourse(params);
        },
        //提交课程
        // addCourseLabs() {
        //      if(!this.addCourseForm.courseCode || !this.courseCodeRep){
        //         this.$message({
        //             type: "warning",
        //             message: "请先选择课程"
        //         });
        //         return;
        //     }
        //     if(this.addCourseForm.courseCode || !this.courseCodeRep){
        //         this.$message({
        //             type: "warning",
        //             message: "请先选择课程"
        //         });
        //         return;
        //     }
        //     if(this.title == '添加课程'){
        //         let courseCodeRep = _.cloneDeep(this.courseCodeRep)
        //         let data = {
        //                 id: this.queryForm.id,
        //                 courseCode: this.addCourseForm.courseCode,
        //                 courseCodeRep: courseCodeRep.toString()
        //             }
        //         addHonorModuleCourse(data)
        //         .then(res => {
        //             if (res.code == 200) {
        //                 this.$message({
        //                     type: "success",
        //                     message: "新增成功"
        //                 });
        //                 this.addCourseForm = {};
        //                 this.courseCodeRep = [];
        //                 this.newCourses = [];
        //                 this.courses = [];
        //                 this.showCourseDialog = false;
        //                 this.getTreeData();
        //             }
        //         })
        //         .catch(() => {
        //             this.$message({
        //                 type: "error",
        //                 message: "新增失败"
        //             });
        //         });
        //     }else{
        //         let courseCodeRep = _.cloneDeep(this.courseCodeRep)
        //         let data = {
        //                 honorCourseId: this.honorCourseId,
        //                 courseCode: this.addCourseForm.courseCode,
        //                 courseCodeRep: courseCodeRep.toString()
        //             }
        //         updateHonorModuleCourse(data)
        //             .then(res => {
        //                 if (res.code == 200) {
        //                     this.$message({
        //                         type: "success",
        //                         message: "修改成功"
        //                     });
        //                     this.addCourseForm = {};
        //                     this.courseCodeRep = [];
        //                     this.newCourses = [];
        //                     this.courses = [];
        //                     this.showCourseDialog = false;
        //                     this.getTreeData();
        //                 }
        //             })
        //             .catch(() => {
        //                 this.$message({
        //                     type: "error",
        //                     message: "修改失败"
        //                 });
        //             });
        //     }
            
        // },
        addCourseLabs() {
             if(!this.addCourseForm.courseCode || !this.courseCodeRep){
                this.$message({
                    type: "warning",
                    message: "请先选择课程"
                });
                return;
            }
            let courseCode = this.addCourseForm.courseCode;
            let courseCodeRep = this.courseCodeRep;
            if(courseCodeRep.indexOf(courseCode) != -1){
                this.$message({
                    type: "warning",
                    message: "荣誉课程与替换课程不能相同，请重新选择"
                });
                return;
            }
            if(this.title == '添加课程'){
                let courseCodeRep = _.cloneDeep(this.courseCodeRep)
                let data = {
                        id: this.queryForm.id,
                        courseCode: this.addCourseForm.courseCode,
                        courseCodeRep: courseCodeRep.toString()
                    }
                addHonorModuleCourse(data)
                .then(res => {
                    if (res.code == 200) {
                        this.$message({
                            type: "success",
                            message: "新增成功"
                        });
                        this.addCourseForm = {};
                        this.courseCodeRep = [];
                        this.newCourses = [];
                        this.courses = [];
                        this.showCourseDialog = false;
                        this.getTreeData();
                    }
                })
                .catch(() => {
                    // this.$message({
                    //     type: "error",
                    //     message: "新增失败"
                    // });
                });
            }else{
                let courseCodeRep = _.cloneDeep(this.courseCodeRep)
                // let data = {
                //         honorCourseId: this.honorCourseId,
                //         courseCode: this.addCourseForm.courseCode,
                //         courseCodeRep: courseCodeRep.toString()
                //     }
                let data = {
                        id: this.queryForm.id,
                        honorCourseId: this.honorCourseId,
                        courseCode: this.addCourseForm.courseCode,
                        courseCodeRep: courseCodeRep.toString()
                    }
                updateHonorModuleCourse(data)
                    .then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: "success",
                                message: "修改成功"
                            });
                            this.addCourseForm = {};
                            this.courseCodeRep = [];
                            
                            this.newCourses = [];
                            this.courses = [];
                            this.showCourseDialog = false;
                            this.getTreeData();
                        }
                    })
                    .catch(() => {
                        // this.$message({
                        //     type: "error",
                        //     message: "修改失败"
                        // });
                    });
            }
            
        },
        // 删除课程类型下的课程
        remove(data) {
            this.$confirm("确认删除所选列表课程,是否继续?", "提示", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                closeOnClickModal: false,
                closeOnPressEscape: false,
                type: "warning"
            })
                .then(() => {
                   deleteHonorModuleCourse(data.honorCourseId)
                    .then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: "success",
                                message: "删除成功"
                            });
                            this.getTreeData();
                        }
                    })
                    .catch(reepr => {
                        this.$message({
                            type: "error",
                            message: "删除失败"
                        });
                    });
                })
                .catch(err);
        },
        // 取消对话框课程分类
        cancelAddCourseLab() {
            this.addCourseForm = {};
            this.newCourses = [];
            this.courses = [];
            this.courseCodeRep = [];
            this.showCourseDialog = false;
        },
        resetFormValidate() {
            // 清除表单校验
            this.addCourseForm = {};
            this.newCourses = [];
            this.courses = [];
            this.courseCodeRep = [];
            this.showCourseDialog = false;
            
        },
    }
};
</script>
<style scoped lang="scss">
.div-main {
        margin-bottom: 16px;
    }
.coursemap {
    font-size: 12px;
    margin-bottom: 15px;
}
.el-tabs--border-card {
    background: #fff;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.el-aside {
    padding: 0 20px;
    color: #333;
    /* text-align: center; */
    border-right: 1px solid #cccc;
}

.el-main {
    padding: 20px;
    color: #333;
}
.el-footer {
    border-top: 1px solid #cccc;
    color: #333;
    line-height: 60px;
    text-align: right;
}
.addCourseBtn {
    margin-bottom: 15px;
}
.el-select__tags{
    padding-left: 15px!important;
}
</style>

